import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import './index.less';

import TitleLine from 'components/common/titleLine'
import noImg from 'assets/no_Img.png'
import EquipmentCheckError from '../component/EquipmentCheckError'
import MaintenanceError from '../component/MaintenanceError'
import tools from '../common/tools'
import FileItem from 'components/common/fileItem'
import { message } from 'antd'
import router from 'umi/router'

function ComplaintDetails ({
    dispatch,
    location,
    location: { query },
    headerTaps: { panes },
    deviceRepair: {complaintDetailData}
}) {

    useEffect(() => {
        // 清空数据
        dispatch({type: 'deviceRepair/clean'})
        // 获取详情数据
        dispatch({
          type: 'deviceRepair/getComplaintDetail',
          payload: { id: query.id },
        }).then(res => {
            // 改条数据已被其他账号做除删除或其他操作
            if (res && res.code === '050000') {
                // 关闭当前tabs
                message.error(res.mesg)
                const { pathname } = location
                const panesList = panes.filter(pane => pane.key !== pathname);
                dispatch({
                    type: 'headerTaps/updateHeaderTaps',
                    payload: { panes: panesList },
                });
                router.push('/deviceRepair')
                return
            }
        })
    },[dispatch, location, panes, query])

    // 整理维修记录图片和维修参考资料图片数据格式
    // 判断是否为JSON格式
    function isJSON(str) {
        if (typeof str == 'string') {
            try {
                var obj=JSON.parse(str);
                if(typeof obj == 'object' && obj ){
                    return true;
                }else{
                    return false;
                }

            } catch(e) {
                return false;
            }
        }
    }

    const[imgArr, setData] = useState([])
    const[imgArr2, setData2] = useState([])
    const[imgArr3, setData3] = useState([])

    useEffect(() => {
        if (complaintDetailData) {
            // 如果是JSON格式才给渲染
            if (isJSON(complaintDetailData.orderRepairlogFile)) {
                let arr = []
                arr = JSON.parse(complaintDetailData.orderRepairlogFile)
                setData(arr)
            }
            if (isJSON(complaintDetailData.file)) {
                let arr = []
                arr = JSON.parse(complaintDetailData.file)
                setData2(arr)
            }
            if (isJSON(complaintDetailData.rectificationFile)) {
                let arr = []
                arr = JSON.parse(complaintDetailData.rectificationFile)
                setData3(arr)
            }
        }
    }, [complaintDetailData])

    return (
        <div className='complaintDetails'>
            <div className="aotside_left">
            <div className='boxOne'>
                <TitleLine title='维修基本信息'/>
                <div className='baseInfo'>
                    <div className='baseInfo-body-item' style={{width: '15%'}}>
                    <span>报修员：</span>
                    <span>{complaintDetailData && complaintDetailData.reportName}</span>
                    </div>
                    <div className='baseInfo-body-item' style={{width: '25%'}}>
                    <span>报修时间：</span>
                    <span>{complaintDetailData && complaintDetailData.reportTime}</span>
                    </div>
                    <div className='baseInfo-body-item' style={{width: '15%'}}>
                    <span>维修时间：</span>
                    <span>{complaintDetailData && complaintDetailData.repairCycle}天</span>
                    </div>
                    <div className='baseInfo-body-item' style={{width: '25%'}}>
                    <span>接单时间：</span>
                    <span>{complaintDetailData && complaintDetailData.receiptTime}</span>
                    </div>
                    <div className='baseInfo-body-item'>
                    <span>维修期限：</span>
                    <span>{complaintDetailData && complaintDetailData.endTime}</span>
                    </div>
                </div>
                <div className='messageBox'>
                    <div className='centerBox'>
                        <TitleLine title='维修设备信息' />
                        <div className='centerfoot'>

                            <div className="contentbox">
                            <div className='imgbox'>
                                <img src={complaintDetailData && complaintDetailData.deviceImage ? complaintDetailData.deviceImage : noImg} alt=''/>
                                <div className='imgalt'>
                                    <span>设备状态<span className='imgalText'>{complaintDetailData && tools.getCheckStatus(complaintDetailData.runStatus)}</span></span>
                                    <span>台账状态<span className='imgalText'>{complaintDetailData && tools.getAccountStatus(complaintDetailData.ledgerStatus)}</span></span>
                                </div>
                            </div>
                            <div className='mesgbox'>
                                <div className='mesgboxTop'>
                                    <div className='mesgboTop_title' style={{fontSize: '0.16rem'}}>{complaintDetailData && complaintDetailData.deviceName}</div>
                                    <span className='create_title'>创建日期</span>
                                    <span className='crate_time'>
                                        {
                                        complaintDetailData && complaintDetailData.createTime
                                        ?
                                        complaintDetailData.createTime.slice(0,10)
                                        :
                                        ''
                                        }
                                    </span>
                                </div>
                                <div className='otsidebox'>

                                    <div className=''>
                                        <div className='contentbox1'>
                                            <div className='titles'>设备类型</div>
                                            <span className='contents'>{complaintDetailData && complaintDetailData.deviceType}</span>
                                        </div>
                                        <div className='contentbox1'>
                                            <div className='titles'>使用部门</div>
                                            <span className='contents'>{complaintDetailData && complaintDetailData.groupName}</span>
                                        </div>
                                    </div>
                                    <div className=''>
                                        <div className='contentbox1'>
                                            <div className='titles'>设备编号</div>
                                            <span className='contents'>{complaintDetailData && complaintDetailData.deviceNo}</span>
                                        </div>
                                        <div className='contentbox1'>
                                            <div className='titles'>责任人 </div>
                                            <span className='contents'>{complaintDetailData && complaintDetailData.chargePerson}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            </div>
                        </div>
                    </div>
                    <div className='center_Box'>
                        <TitleLine title='维修员信息' />
                        <div className='userMsg'>
                            <div className='photobox'>
                                <div className='photo'><img src={complaintDetailData && complaintDetailData.headImage ? complaintDetailData.headImage : noImg} alt=''/></div>
                                <div className='photo_title'>维修员头像</div>
                            </div>
                            <div className='msg'>
                                <div className='msgTitle'>
                                    <div className='title'>姓名</div>
                                    <div className='title'>维修员编号</div>
                                    <div className='title'>手机号</div>
                                </div>
                                <div className='msgText'>
                                    <div className='text'>{complaintDetailData && complaintDetailData.repairName}</div>
                                    <div className='text'>{complaintDetailData && complaintDetailData.userNo}</div>
                                    <div className='text'>{complaintDetailData && complaintDetailData.mobile}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='right_Box'>
                        <TitleLine title='备品备件' />
                        <div className='userMsg contents'>
                            {complaintDetailData && complaintDetailData.orderSpareRemark ? complaintDetailData.orderSpareRemark : '无'}
                        </div>
                    </div>
                </div>
            </div>

            <div className='boxOne' style={{marginTop: '0.24rem'}}>
                <TitleLine title='维修结果'/>
                <div className='boxtitle'>
                    <span className='title'>维修记录：</span>
                    <span className='content'>
                        {complaintDetailData && complaintDetailData.orderRepairlogRemark}
                    </span>
                </div>
                <div className='imgWrrip' style={{marginTop: '0.2rem'}}>
                {
                    imgArr.map(item => <FileItem data={item}/>)
                 }
                </div>
            </div>

            <div className='boxOne' style={{marginTop: '0.24rem'}}>
                <TitleLine title='维修参考资料'/>
                <div className='boxtitle'>
                    <span className='title'>维修描述：</span>
                    <span className='content'>{complaintDetailData && complaintDetailData.repairRemark}</span>
                </div>
                <div className='imgWrrip' >
                    {
                        imgArr2.map(item => <FileItem data={item}/>)
                    }
                </div>
                <div className="errobox">
                    <div className="checkError">
                        <EquipmentCheckError data={complaintDetailData}/>
                    </div>
                    <div className='maintError'>
                        <MaintenanceError data={complaintDetailData}/>
                    </div>
                </div>
            </div>

            <div className='boxOne' style={{marginTop: '0.24rem', display: complaintDetailData && complaintDetailData.reason ? 'block' : 'none'}}>
                <TitleLine title='整改信息'/>
                <div className='refomMessage_box' style={{marginBottom: '0.24rem', marginLeft: '0.12rem'}}>
                    <div className="reson">
                        <span className='title'>整改原因：</span>
                        <div className="">{complaintDetailData && complaintDetailData.reason}</div>
                    </div>
                    <div className="time">
                        <span className='title'>整改截止时间：</span>
                        <div className="">{complaintDetailData && complaintDetailData.rectificationEndTime}</div>
                    </div>
                </div>

                <TitleLine title='整改结果'/>
                <div className="logo">
                    <span className='title'>整改记录：</span>
                    <div className="text">{complaintDetailData && complaintDetailData.rectificationRemark}</div>
                </div>
                <div className='imgWrrip'>
                    {
                        imgArr3.map(item => <FileItem data={item}/>)
                    }
                </div>
            </div>

            <div className='boxOne' style={{marginTop: '0.24rem'}}>
                <TitleLine title='投诉信息'/>
                <div className='compainMsg'>
                    <div className="reson">
                        <span className='title'>投诉原因：</span>
                        <div className="title">{complaintDetailData && complaintDetailData.complaintRemark}</div>
                    </div>
                    <div className="time">
                        <span className='title'>投诉时间：</span>
                        <div className="title">{complaintDetailData && complaintDetailData.complaintTime}</div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    )
}

export default connect(({ deviceRepair, headerTaps }) => ({
    deviceRepair, headerTaps
}))(ComplaintDetails)
